<template>
    <div class="statistic-analysis-detail-container">
        <div class="s-a-container-top">
            <div class="s-a-container-top_item">
                <svg-icon icon-class="folder" width="14" height="14" />
                <div class="title-word">{{ $t("tool.evaluationAnalysis.exportReport") }}</div>
            </div>
            <div class="s-a-container-top_item">
                <svg-icon icon-class="folder" width="14" height="14" />
                <div class="title-word">{{ $t("tool.evaluationAnalysis.playback") }}</div>
            </div>
        </div>
        <div class="s-a-container-content">
            <div class="s-a-container__statistics">
                <div class="s-a-container__statistics_content">
                    <div class="s-a-container__statistics_item">
                        <div class="s-a-container__statistics_item_num">100</div>
                        <div class="s-a-container__statistics_item_name">最高分</div>
                    </div>
                    <div class="s-a-container__statistics_item">
                        <div class="s-a-container__statistics_item_num">100</div>
                        <div class="s-a-container__statistics_item_name">最低分</div>
                    </div>
                    <div class="s-a-container__statistics_item">
                        <div class="s-a-container__statistics_item_num">100</div>
                        <div class="s-a-container__statistics_item_name">平均分</div>
                    </div>
                </div>
            </div>

            <div class="s-a-container__filter">
                <NumberConditional @update="handleFilter" :tableData="tableData" :availableFields="availableFields">
                </NumberConditional>
            </div>

            <div class="s-a-container__table">
                <el-table :data="filteredData" style="width: 100%" height="calc(100vh - 300px)">
                    <el-table-column label="回放" width="80" align="center">
                        <template #default="{ row }">
                            <svg-icon icon-class="play" width="20" height="20" style="color: var(--app-primary-base);cursor: pointer;"></svg-icon>
                        </template>
                    </el-table-column>
                    <el-table-column prop="round" label="轮次" width="100" align="center"></el-table-column>
                    <el-table-column prop="total" label="总得分" width="100" align="center"></el-table-column>

                    <template v-for="(item, index) in tableData[0].indexList">
                        <el-table-column :label="item.indexName" align="center">
                            <el-table-column prop="indexList" label="值" align="center">
                                <template #default="{ row }">
                                    {{ row.indexList[index].indexValue }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="indexList" label="权重" align="center">
                                <template #default="{ row }">
                                    {{ row.indexList[index].indexWeight }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="indexList" label="分数" align="center">
                                <template #default="{ row }">
                                    {{ row.indexList[index].indexScore }}
                                </template>
                            </el-table-column>
                        </el-table-column>
                    </template>
                </el-table>
            </div>

        </div>

    </div>
</template>

<script>
import NumberConditional from './numberConditional.vue';
export default {
    name: "StatisticAnalysisDetail",
    data() {
        return {
            tableData: [{
                round: 1,
                total: '100',
                indexList: [
                    {
                        indexName: "突防成功率",
                        indexValue: 0.5,
                        indexWeight: 1,
                        indexScore: 90
                    },
                    {
                        indexName: "绕飞成功率",
                        indexValue: 1,
                        indexWeight: 2,
                        indexScore: 80
                    },
                    {
                        indexName: "命中率",
                        indexValue: 3,
                        indexWeight: 2,
                        indexScore: 60
                    },
                    {
                        indexName: "平均脱靶量",
                        indexValue: 1,
                        indexWeight: 1,
                        indexScore: 10
                    }],
            },
            {
                round: 2,
                total: '90',
                indexList: [
                    {
                        indexName: "突防成功率",
                        indexValue: 0.5,
                        indexWeight: 1,
                        indexScore: 90
                    },
                    {
                        indexName: "绕飞成功率",
                        indexValue: 1,
                        indexWeight: 2,
                        indexScore: 80
                    },
                    {
                        indexName: "命中率",
                        indexValue: 3,
                        indexWeight: 2,
                        indexScore: 60
                    },
                    {
                        indexName: "平均脱靶量",
                        indexValue: 1,
                        indexWeight: 1,
                        indexScore: 10
                    }],
            }],
            filteredData: [],
            availableFields: [],
        };
    },


    components: {
        NumberConditional
    },
    created() {
        this.availableFields = [
            { prop: 'round', label: '轮次' },
            { prop: 'total', label: '总得分' },
            ...this.tableData[0].indexList.map(item => ({
                prop: item.indexName,
                label: item.indexName
            }))
        ];
        this.filteredData = this.tableData;

    },
    methods: {
        handleFilter(filteredData) {
            this.filteredData = filteredData;
        }
    },

    beforeRouteLeave(to, from, next) {
        if (to.path == localStorage.getItem("conindsyPath")) {
            localStorage.removeItem("conindsyPath");
        }
        next();
    },

};
</script>
<style lang="scss" scoped>
.statistic-analysis-detail-container {
    width: 100%;
    height: 100%;

    .s-a-container-top {
        height: 35px;
        display: flex;
        justify-content: flex-end;
        border-bottom: 1px solid var(--ui-border-color-base);

        .s-a-container-top_item {
            display: flex;
            margin-right: 20px;
            align-items: center;
            font-size: var(--ui-font-size-base);
            cursor: pointer;

            .title-word {
                margin-left: 5px;
            }
        }
    }

    .s-a-container-content {
        display: flex;
        height: calc(100% - 35px);
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .s-a-container__statistics {
            margin-top: 10px;
            width: 95%;
            height: 100px;
            border-radius: 5px;
            padding: 10px 20px;
            background-color: var(--ui-component-background-alt);
            margin-bottom: 30px;

            .s-a-container__statistics_content {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                .s-a-container__statistics_item {
                    .s-a-container__statistics_item_num {
                        font-size: var(--ui-font-size-title);
                    }

                    .s-a-container__statistics_item_word {
                        font-size: var(--ui-font-size-base);
                        color: var(--app-text-fg-low);
                    }

                    .s-a-container__statistics_item_name {
                        font-size: var(--ui-font-size-sm);
                        color: var(--app-text-fg-low);
                        margin-top: 10px;
                        margin-bottom: 10px;

                    }
                }
            }

        }

        .s-a-container__filter {
            width: 95%;
        }

        .s-a-container__table {
            flex: 1;
            width: 95%;
            overflow: auto;
            border-radius: 5px;

            ::v-deep .el-table__row {
                height: 42px;
            }

        }
    }
}
</style>